<script>
import Student from './components/Student'
import School from './components/School'

export default {
  name: "App",
  components: {
    Student,
    School
  },
  methods: {
    getSchoolName(val) {
      console.log('学校名称' + val)
    },
    getStudentName(val, ...args) {
      console.log('学生名称' + val)
      console.log('其他参数' + args)
    },
    show() {
      console.log('原生事件')
    }
  },
  mounted() {
    // 子组件向父组件传递数据的方式3 组件自定义事件
    // 这种方式更加灵活
    this.$refs.student.$on('test', this.getStudentName)
    this.$refs.student.$on('test2', this.getStudentName)
  }
}
</script>

<template>
  <div>
    <!--    子组件向父组件传递数据的方式1-->
    <School :getSchoolName="getSchoolName"/>
    <!--    子组件向父组件传递数据的方式2 组件自定义事件-->
    <Student @test="getStudentName"/>
    <!--    子组件向父组件传递数据的方式3 组件自定义事件-->
    <Student ref="student"/>
    <!--    使用原生的事件需要添加修饰符native 否则绑定的事件会被识别为自定义事件-->
    <Student @click.native="show"/>
  </div>
</template>

<style scoped>

</style>